import { useCallback, useRef } from "react";
import { View, Image, Button, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import classNames from "classnames";

import { CustomScrollView, IconFont } from "@/components";
import { scrollTop } from "@/utils";
import { useStatusBarHeight } from "@/hooks";
import { wikiBackground } from "@/assets/image";

import { useRandomCharacters } from "./useRandomCharacters";
import CharacterCard from "./CharacterCard";

import "./index.scss";

// 顶部的按钮
const buttons = [
  {
    title: "角色",
    onClick: () =>
      Taro.navigateTo({
        url: "/pages/wiki/all-character/index",
      }),
  },
  {
    title: "剧集",
    onClick: () =>
      Taro.navigateTo({
        url: "/pages/wiki/all-episode/index",
      }),
  },
];

const Wiki = () => {
  const ScrollViewRef = useRef() as React.MutableRefObject<any>;
  const [characters, refreshCharacters] = useRandomCharacters(6);
  const statusBarHeight = useStatusBarHeight();

  const onRefresh = useCallback(async () => {
    scrollTop(ScrollViewRef);
    refreshCharacters();
  }, [ScrollViewRef, refreshCharacters]);

  return (
    <View className="wiki">
      <CustomScrollView onRefresh={onRefresh} ref={ScrollViewRef}>
        <View className="wiki-header" style={{ marginTop: statusBarHeight }}>
          <Image src={wikiBackground} className="wiki-header-background" mode="widthFix" />
        </View>
        <View className="wiki-content">
          <View className="wiki-content-top">
            {buttons.map((btn, index) => (
              <Button
                key={btn.title}
                className={classNames("wiki-content-btn", {
                  "wiki-content-btn_last": index === buttons.length - 1,
                })}
                hoverClass="btn_active"
                hoverStyle={{ opacity: 0.6 }}
                onClick={btn.onClick}
              >
                <Text className="wiki-content-btn-value">{btn.title}</Text>
              </Button>
            ))}
          </View>
          {characters.map((character) => (
            <CharacterCard key={character.id} character={character} />
          ))}
        </View>

        <View className="wiki-footer">
          <Button
            className="wiki-footer-btn"
            style={{ bottom: 0 }}
            onClick={onRefresh}
            hoverClass="btn_active"
            hoverStyle={{ opacity: 0.6 }}
          >
            <IconFont name="swap" size={56} />
          </Button>
        </View>
      </CustomScrollView>
    </View>
  );
};
export default Wiki;
